/**
 *  @互联家
 *  @互联家 酒店管理提交页面
 */
import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';

import { InputItem, List, Picker, TextareaItem, ImagePicker } from 'antd-mobile-rn';

import cityList from '../utils/city';


/**
 *  @style 主要样式导入
 */
import hotalMangeStyle from "../styles/hotalMange";

export default class HotalMangeScreen extends Component {

	static navigationOptions = {
		headerTitle: '酒店管理',
		headerRight: <View />,
	};

	constructor(props) {
		super(props);
		this.state = {
			cityList,
			value: [],
			pickerValue: [],
			hotalName: '',
			userName: '',
			userPhone: '',
			userPosition: '',
			files: [],
		};
	};

	onChange = (value) => {
		this.setState({ value });
	};

	handleFileChange = (files) => {
		this.setState({
			files,
		});
	};

	render() {

		return (
			<View style={{ marginTop: 15 }}>
				<List>

					<InputItem
						clear
						// error
						onErrorPress={() => alert('clicked me')}
						hotalName={this.state.hotalName}
						onChange={(hotalName) => {
							this.setState({
								hotalName,
							});
						}}
						extra=""
						placeholder="请输入酒店名称"
					>
						酒店名称
          </InputItem>

					<InputItem
						clear
						// error
						onErrorPress={() => alert('clicked me')}
						userName={this.state.userName}
						onChange={(userName) => {
							this.setState({
								userName,
							});
						}}
						extra=""
						placeholder="请输入联系人"
					>
						联系人
          </InputItem>

					<InputItem
						clear
						// error
						onErrorPress={() => alert('clicked me')}
						userPhone={this.state.userPhone}
						onChange={(userPhone) => {
							this.setState({
								userPhone,
							});
						}}
						extra=""
						placeholder="请输入联系电话"
					>
						联系电话
          </InputItem>

					<Picker
						title="所在城市"
						data={this.state.cityList}
						cols={3}
						value={this.state.value}
						onChange={this.onChange}
					>
						<List.Item arrow="horizontal" last>
							所在城市
            </List.Item>
					</Picker>
					<Picker
						title="所在城市"
						data={this.state.cityList}
						cols={3}
						value={this.state.pickerValue}
						onChange={(v) => this.setState({ pickerValue: v })}
						onOk={(v) => this.setState({ pickerValue: v })}
					>
					</Picker>
					<Picker
						title="所在城市"
						data={this.state.cityList}
						cols={3}
						value={this.state.pickerValue}
						onChange={(v) => this.setState({ pickerValue: v })}
						onOk={(v) => this.setState({ pickerValue: v })}
					>
					</Picker>

					<InputItem
						clear
						// error
						onErrorPress={() => alert('clicked me')}
						userPosition={this.state.userPosition}
						onChange={(userPosition) => {
							this.setState({
								userPosition,
							});
						}}
						extra=""
						placeholder="请输入详细地址"
					>
						详细地址
          </InputItem>

					<List.Item arrow="empty">
						店铺简介
          </List.Item>

					<TextareaItem rows={4} placeholder="最多300字" count={300} />

					<List.Item arrow="empty">
						酒店图片
          </List.Item>

					<ImagePicker
						onChange={this.handleFileChange}
						files={this.state.files}
					/>

					<View style={styles.container}>
						<View style={styles.submitBtn}>
							<Button
								title="提交"
								color="#0766f1"
								accessibilityLabel="点击提交"
							/>
						</View>
					</View>

				</List>

			</View>
		);
	};

};

const styles = StyleSheet.create(hotalMangeStyle);